<!-- 首页 -->
<template>
	<view>
		<!-- <pay-item  preOrderId="H2025022111555600773082590" @onsuccess="onsuccess" @onfail="onfail"/> -->
	<view >
		<image class="image posiab" mode="widthFix"  :src="$IMG_URL + '/uploads/20241204/ef02b17b2bca465e0535f03db9663c16.png'"></image>
		<view class="posire con" :style="{paddingTop: systemInfoHeight+'px'}">
			<image class="image mb10 mt10" style="width:400rpx;" mode="widthFix" src="/static/loggin.png"></image>
			<indexBananer></indexBananer>
			<view @click="kaifa" class="flex-ju-b con mt20">
				<view @click.stop="qiandao">
					<image mode="widthFix" style="width:120rpx;" src="/static/meiri.png"></image>
					<view class="color4dd">每日签到</view>
				</view>
				<view @click.stop="mianfei">
					<image mode="widthFix" style="width:120rpx;" src="/static/xiyun.png"></image>
					<view class="color4dd">免费抽娃</view>
				</view>
				<view>
					<image mode="widthFix" style="width:120rpx;" src="/static/liwu.png"></image>
					<view class="color4dd">我的礼物</view>
				</view>
				<view style="text-align: center;">
					<image mode="widthFix" style="width:120rpx;" src="/static/meiri.png"></image>
					<view class="color4dd">每日任务</view>
				</view>
				
				<view  style="text-align: center;">
					<image mode="widthFix" style="width:120rpx;" src="/static/shequn.png"></image>
					<view class="color4dd">社区福利</view>
				</view>
				 
				<!--<view @click.stop="duihaun" style="text-align: center;">
					<image mode="widthFix" style="width:90rpx;" src="/static/duihuan.png"></image>
					<view class="color4dd">兑换码</view>
				</view>
				
				 <view @click.stop="yyi">
					<image mode="widthFix" style="width:90rpx;" src="/static/images/tabbar/yis.png"></image>
					<view class="color4dd">一番赏</view>
				</view> -->
				<!-- <view>
					<image mode="widthFix" style="width:90rpx;" src="/static/chongpang.png"></image>
					<view class="color4dd">冲榜领奖</view>
				</view> -->
				
			</view>

			<!-- <view @click="kaifa" class="flex-ju-b mt20">
				<view class="" style="flex: 0 0 49%;">
					<image mode="widthFix" style="width:100%;" class="flex" :src="$IMG_URL + '/uploads/20241204/0fb3ead6a587e168a0bb3a9be29482fb.png'"></image>
				</view>
				<view class="" style="flex: 0 0 49%;">
					<image mode="widthFix" style="width:100%;" class="flex " :src="$IMG_URL + '/uploads/20241204/0dea60a4cde4c62d30595095a1a486af.png'"></image>
					<image mode="widthFix" style="width:100%;" class="flex mt5" :src="$IMG_URL + '/uploads/20241204/68cd2be112fa9fb213abaa8b64f1552b.png'"></image>
				</view>
			</view> -->
			<view v-if="categorylist.length" class="bgfff p30 mt15" style="border-radius: 20rpx;">
				<view class="flex-ju-b">
					<view class="flex-a-i">
						<image mode="widthFix" class="flex mr5" style="width: 40rpx;" src="/static/imgip.png"></image>
						爆款IP导航
					</view>
					<view @click="ltoutrl" class="color8D8D99">MORE<u-icon name="arrow-right" color="#8D8D99" size="28"></u-icon></view>
				</view>
				<view class="flex-ju-b mt15 center">
					<view @click="toutrl(4,item.id)" v-for="(item,p) in categorylist" :key="p">
						<template v-if="item.status==1">
							<image  style="width:90rpx;height:90rpx;" :src="item.image"></image>
							<view class="color4dd">{{item.name}}</view>
						</template>
					</view>
				</view>
			</view>
			<view v-if="hotList.length" class="bgfff p30 mt15" style="border-radius: 20rpx;">
				<view class="flex-ju-b">
					<view class="flex-a-i">
						<image mode="widthFix" class="flex mr5" style="width: 40rpx;" src="/static/re.png"></image>
						热门推荐
					</view>
					<view @click="toutrl(1)" class="color8D8D99">MORE<u-icon name="arrow-right" color="#8D8D99" size="26"></u-icon></view>
				</view>
				<view class=" mt15">
					<swiper disable-touch display-multiple-items="3" class="color4dd "
						style="height:280rpx;font-size: 24rpx;">
						<swiper-item v-for="(item,index) in hotList" :key="index">
							<view @click="jumpPage(item)">
								<image class="imgwid" :src="item.cover_image"></image>
								<view class="one mt5" style="width:190rpx;text-align: left;color:#4D4D4D;">
									{{item.title}}
								</view>
								<view class="mt5" style="text-align: left;color:#4D4D4D;" >
									￥{{item.single_price}}
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view v-if="jingList.length" class="bgfff p30 mt15 " style="border-radius: 20rpx;">
				<!-- <view class="flex-ju-b">
					<view class="flex-a-i">
						<image mode="widthFix" class="flex mr5" style="width: 40rpx;" src="/static/jx.png"></image>
						镇店精选
					</view>
					<view @click="toutrl(2)" class="color8D8D99">MORE<u-icon name="arrow-right" color="#8D8D99" size="26"></u-icon></view>
				</view> -->
				<scroll-view scroll-x>
					<view class="flex-a-i">
							<view @click="taplsit(h)" v-for="(item,h) in 10" :class="h==indexd?'active':''" style="color:#269696;padding:10rpx 25rpx;border-radius: 30px;white-space: nowrap;" class="flex-ju-c mr10 ">
								SKULLPANDA
						</view>
					</view>
				</scroll-view>
				<view style="font-size: 24rpx;" class="flex-ju-b flex-wrap ">
					<view @click="jumpPage(item)" v-for="(item,h) in jingList" :key="h" class="mt15">
						<image class="himgwid" :src="item.cover_image"></image>
						<view class=" texhom one" style="color:#4d4d4d;">
							{{item.title}}
						</view>
						<view class="mt5" style="color:#4d4d4d;">
							￥{{item.single_price}}
						</view>
					</view>
					 
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN || APP-PLUS -->
				<view style="height:10px;"></view>
			<!-- #endif -->
			
			<!-- #ifdef H5 -->
				<view style="height:60px;"></view>
			<!-- #endif -->
			
		</view>
		<!-- <shopro-auth-modal></shopro-auth-modal> -->
		<!-- <shopro-notice-modal v-if="isLogin"></shopro-notice-modal> -->
		<!-- <toast-lottery></toast-lottery> -->
		
		<view style="position: fixed;bottom:100px;z-index: 99;right:0px;font-size: 20rpx;color:#fff;">
			<image @click="haibao" mode="widthFix" class="image" style="width:60px;" :src="$IMG_URL + '/uploads/20241221/88a9b01c4f105df8ef365fe126443433.png'"></image>
		<!-- 	<view @click="haibao" style="width:50px;height:50px;border-radius: 50%;background: #50d866;display: flex;justify-content: center;align-items: center;">
				<view>
					<view style="font-size: 20px;">礼</view>
				</view>
			</view> -->
		</view>
		
		<u-popup
		  mode="center"
		  border-radius="20"
		  :closeable="false"
		  isbg="transparent"
		  v-model="showIllustrate"
		>
		  <view style="position: relative;">
			  <view class="flex-ju-c">
				  <view class="posiab" style="top:140rpx;text-align: center;">
					  扫一扫二维码
					  <view>
						  进群领豪礼
					  </view>
					  <view>
						  <image show-menu-by-longpress style="width: 200rpx;height: 200rpx;margin-top: 30rpx;" v-if="list2[0]" :src="list2[0].fullPath"></image>
					  </view>
				  </view>
				  <view @click="baocun(list2[0].fullPath)" class="posiab" style="width:260rpx;height:80rpx;bottom:105rpx;">
				  				   
				  </view>
			  </view>
			   
			   <image  mode="widthFix" style="width: 500rpx;" :src="$IMG_URL + '/uploads/20241221/f6a87cfd98b5eeee3889c35ee27226a1.png'"></image>
			   <!-- <swiper class="" style="width: 500rpx;height: 500rpx;">
					<swiper-item v-for="(item,k) in list2" :key="k">
						<view class="">
							<image mode="widthFix" style="width: 500rpx;" :src="item.fullPath"></image>
					</view>
					</swiper-item>
			    </swiper> -->
		  </view>
		<view @click="showIllustrate = false" class="u-flex" style="justify-content: center;">
			<u-icon name="close-circle" size="50" color="#fff"></u-icon>
		</view>
		</u-popup>
		
		<u-popup
		  mode="center"
		  :mask-close-able="false"
		  :closeable="false"
		  isbg="transparent"
		  v-model="showIllustrate1"
		>
		  <view >
			  <image  @click="cclick(list2[index])" mode="widthFix" style="width: 500rpx;" v-if="list2[index]" :src="list2[index].fullPath"></image>
			 <!-- <swiper class="" style="width: 500rpx;height: 500rpx;">
					<swiper-item v-for="(item,k) in list2" :key="k">
						<view class="">
							<image mode="widthFix" style="width: 500rpx;" :src="item.fullPath"></image>
					</view>
					</swiper-item>
			  </swiper> -->
		  </view>
		<view @click="tabhide" class="u-flex" style="justify-content: center;margin-top:20rpx;">
			<u-icon name="close-circle" size="50" color="#fff"></u-icon>
		</view>
		</u-popup>
		
		<u-popup
		  v-model="showModal"
		  :border-radius="20"
		  mode="center"
		   isbg="transparent"
		  :closeable="false"
		  >
		 <view style="background: #ecf6fb;border-radius: 20rpx;">
				 <view style="width:500rpx;height: 600rpx;">
					 <image class="image posiab" style="height: 600rpx;"  :src="$IMG_URL + '/uploads/20241204/ef02b17b2bca465e0535f03db9663c16.png'"></image>
					<view class="flex-ju-c" style="height:600rpx;">
						<view style="background: #fff;position: relative;z-index: 5;width:450rpx;height: 550rpx;box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.2);border-radius: 20rpx;padding:12px;">
								<swiper  class="swiper flex-ju-c" style="height: 380rpx;">
									<swiper-item v-for="(item,h) in liping" :key="h" v-if="liping.length">
										<view class="flex-ju-c">
											<image style="height:360rpx;width:360rpx;" :src="item.goods_image"></image>
										</view>
									</swiper-item>
								</swiper>
							<view class="flex-ju-c mb5">好友赠送你{{liping.length}}个礼物</view>
							<view @click="lingqu" class="flex-ju-c" style="	background: #a084f0;
				border-radius: 168rpx 168rpx 168rpx 168rpx;color:#fff;height: 76rpx;">立即领取</view>
						</view>
					</view>
				 </view>
			
		 </view>
		 <view @click="showModal = false" class="u-flex" style="justify-content: center;margin-top:20rpx;">
		 	<u-icon name="close-circle" size="50" color="#ccc"></u-icon>
		 </view>
		</u-popup>
		
		<xun-upgrade></xun-upgrade>
	</view>
	</view>
</template>

<script>
	
	import indexBananer from './two_open_components/index-bananer.vue';
	import ToastLottery from './components/toast-lottery.vue';

	export default {
		components: {
			indexBananer,
			ToastLottery
		},
		data() {
			return { 
				indexd:0,
				shareid:"",
				liping:[],
				showModal:false,
				updata:true,
				index:0,
				width:0,
				height:0,
				list2:[],
				showIllustrate1:false,
				showIllustrate:false,
				categorylist:[],
				hotList:[],
				jingList:[],
				systemInfoHeight: uni.getSystemInfoSync().statusBarHeight,
			}
		},
		computed: {

		},
		onPullDownRefresh() {

		},
		onPageScroll(e) {

		},
		onShow() {
			

		},
		mounted() {
			// const DGBillPlugin = requirePlugin('dg-bill');
			// setTimeout(()=>{
			// 	DGBillPlugin.requestPay('H2025022018443900772713056', this.onsuccess, this.onfail);
			// },3000)
			
			if(uni.getStorageSync('token')){
				this.$http('v1.check_user_transfer').then((res) => {
					if(res.data.length){
						this.liping=res.data
						this.showModal=true
					}
				})
			}
			if(this.shareid){
				this.$http('v1.transfer_info',{
					id:this.shareid
				}).then((res) => {
					if(res.data.id){
						this.liping.push(res.data)
						this.showModal=true
					}
				})
			}
		},
		onHide() {
 
		},
		onLoad(option) {
			
			if(option&&option.transfer_id){
				this.shareid = option.transfer_id
			}
		
			this.$http('v1.categorylist', {
				page: 1,
				rows: 5,
			}).then((res) => {
				if (res.code == 1) {
					
					this.categorylist =res.data.list
				}
			})
			
			this.$http('v1.activitysList', {
				tag: 1,
				page: 1,
				rows: 3,
			}).then((res) => {
				if (res.code == 1) {
					this.hotList =res.data.list
				}
			})
			this.getxuan()
				
			this.$http('v1.getHomePoster', {
			}).then((res) => {
				if (res.code == 1) {
					if(res.data.length){
						this.showIllustrate1=true
						this.list2 = res.data
					}
				}
			})
			 
		},
		methods: {
			taplsit(indexd){
				this.indexd = indexd
			},
			lingqu(){
				this.$http('v1.getTransfer',{
					id:this.liping[0].id
				}).then((res) => {
					this.showModal=false
					uni.showToast({
						title:"领取成功",
						icon:"none"
					})
				})
			},
			onfail(e){
				console.log(666,e)
			},
			onsuccess(e){
				console.log(555,e)
			},
			tabhide(){
				this.showIllustrate1 = false
				
				setTimeout(()=>{
					this.index++
					if(this.index < this.list2.length){
						this.showIllustrate1 = true
					}
				},300)
				
			},
			baocun(srcf){
				
			uni.downloadFile({
				url: srcf,
				success: (res) => {
					if (res.statusCode === 200) {
						console.log(res.tempFilePath)
						console.log('下载成功');
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								uni.showToast({
									title:"保存成功",
									icon:"none"
								})
							},fail(res) {
								console.log(res,'mmn')
							}
						});
					}
				}
			});
				
				
			},
			qiandao(){
				uni.navigateTo({
					url:"/pages/index/qiandao"
				})
			},
			mianfei(){
				uni.navigateTo({
					url:"/pages/index/two_open_components/mianfeiwa"
				})
				
				// this.$http('v1.getActYfs', {
				// }).then((res) => {
				// 	if (res.code == 1) {
				// 		uni.navigateTo({
				// 			url:"/pages/rewardGoods/portrait/index?id="+res.data.id
				// 		})
				// 	}
				// })
			},
			haibao(){
				uni.showLoading()
				this.$http('v1.getHomeButton', {
				}).then((res) => {
					if (res.code == 1) {
						this.height = '900'
						this.width = '300'
						this.list2 = res.data
						this.showIllustrate=true
						uni.hideLoading()
					}
				})
			},
			cclick(item){
				if(item.activity_type==1){
					uni.navigateTo({
						url:"/pages/rewardGoods/portrait/index?id="+item.activity_id
					})
				}
			},
			duihaun(){
				uni.navigateTo({
					url:"/pages/index/duihuan"
				})
			},
			yyi(){
				uni.switchTab({
					url:"/pages/index/two_open_components/things-list"
				})
			},
			ltoutrl(){
				uni.navigateTo({
				  url: `/pages/index/iplist`,
				});
			},
			kaifa(){
				uni.showToast({
					title:"开发中...",
					icon:"none"
				})
			},
			toutrl(type,id){
				uni.navigateTo({
				  url: `/pages/index/list?type=${type}&id=${id}`,
				});
			},
			getxuan(){
				this.$http('v1.activitysList', {
					tag: 2,
					page: 1,
					rows: 4,
				}).then((res) => {
					if (res.code == 1) {
						this.jingList =res.data.list
					}
				})
			},
			jumpPage(e) {
			  switch (e.activity_type) {
			    case '1':
			      uni.navigateTo({
			        url: `/pages/rewardGoods/portrait/index?id=${e.id}`,
			      });
			
			      break;
			    case '2':
			      uni.navigateTo({
			        url: `/pages/fukubukuro/extract/extract?id=${e.id}`,
			      });
			      break;
			  }
			},
		},
		onReachBottom() {

		}
	};
</script>

<style lang="scss">
	page {
		background: #ECF6FB;
	}
	.active{
		background:#CCF6EF;
	}
	.texhom {
		width: 305rpx;
		// height:45px;
	}

	.himgwid {
		width: 305rpx;
		height: 305rpx;
		border-radius: 20rpx;
	}

	.color4dd {
		text-align: center;
		color: #4D4D4D;
		font-size: 22rpx;
	}

	.color8D8D99 {
		color: #8D8D99;
	}

	.imgwid {
		width: 190rpx;
		height: 190rpx;
		border-radius: 20rpx;

	}
</style>